<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="renderer" content="webkit" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>作家注册-{:get_system_config('web','title')}</title>	
	<style type="text/css">
		html,body {width: 100%;height: 100%;background: #EAF3FF;margin: 0;padding: 0;}		
		div,p {margin: 0;padding: 0;}		
		input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}		
		#container {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 999;overflow: hidden;background: url("{__STATIC__}/author/images/bg_big.75aac57.png");background-size: cover;}
		.login-title {position: absolute;top: 50%; margin-top:-322px; left:0; width:100%; text-align:center; font-size:22px;}
		.login {width: 872px;height: 492px;position: absolute;top: 50%;left: 50%;margin-top: -258px;margin-left: -436px;border-radius: 12px;background-color: #fff;box-shadow: 0 2px 6px rgba(26, 26, 26, .32);flex-direction: row;justify-content: space-between;align-items: center;flex-wrap: nowrap;display: flex;display: -webkit-flex;}
		.login-img {width: 436px;height:492px;border-radius: 12px 0 0 12px;background:url("{__STATIC__}/author/images/bg.png?v=3") no-repeat left center;background-size: cover;}
		.right-wrap {flex: 1;height: 100%;position: relative;box-sizing: border-box; background-color: #fff;}
		.right-wrap .login-logo {padding: 20px 0 0; text-align: center;}
		.login-logo img{height:60px;}
		.login-way{height:39px;text-align: center;}
		.login-way>span {display: inline-block;color: #999999;font-size: 16px;margin: 0 20px;}
		.login-way>span:after {content: "";display: block;width: 36px;height: 3px;margin: 6px auto 0;}
		.login-way .active {color: #1a1a1a;}
		.login-way .active:after {background: #5f5f5f;}		
		.form-item{width: 300px; margin:0 auto; padding: 8px 0;}
		.login-input {width: 100%;height: 38px;text-indent: 10px;border: 1px solid #ddd;border-radius:3px; padding:0;}
		.login-input:hover {border-color: #474747;}
		.login-input:focus {border-color:#474747;border-right-width: 1px !important;outline: 0;box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);-webkit-box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);}
		.code-btn {display: inline-block;}
		.code-btn button {width:80px; height:38px; text-align: center; overflow: hidden; border-radius:3px; line-height: 38px;background-color: #4285f4; border: none;color: #fff;}
		.captcha-img {width:152px; height:38px; display:inline-block; vertical-align:top; border:1px solid #eee; overflow: hidden; border-radius:3px;}
		.captcha-img img {width:152px; height:38px; margin:0; padding:0; border-radius:3px; cursor: pointer;}
		.login-btn {width: 100%; height: 42px; font-size: 16px; margin-top: 3px; color: #fff; cursor: pointer; border-radius:3px; border:1px solid #4285f4; background-color: #4285f4;}
		.login-btn:focus {border-color:#474747; border-right-width: 1px !important;outline: 0;}		
		.footer-link{width: 300px; margin:0 auto; padding:10px 0; height:20px; font-size:14px;}
		.footer-operation{width: 300px;margin:0 auto;line-height:2.4;font-size: 14px;text-align:center;color:#999;padding-top: 10px;}
		.footer-operation a{margin:0 10px;}
		.form-box a{color: #666;text-decoration:none;}
		.form-box a:hover{color: #474747;}
		.foot {position: absolute;font-size: 12px;bottom: 28px;text-align: center;width: 100%;color: #000000;}
		.foot a {color: #000000;}
		.form-item label {
			font-size: 13px;
			color: #474747;
		}
		.form-item label span {
			color: #4285f4;
		}
		input[name="agree"] {
			padding: 0;
			margin: 0;
		}
		.agreement-content {
			padding: 20px;
		}
		.agreement-content p {
			margin-bottom: 14px;
			line-height: 24px;
		}
	</style>
</head>
{php}
$agreement = model('pages')->where(['status' => 1, 'name' => 'agreement'])->value('content');
{/php}
<body>
	<div id="container" style="{:hook('admin_login_style')}">
		<div class="login">
			<div class="login-img"></div>
			<div class="right-wrap">
				<div class="login-logo"><a href="/"><img src="{:get_system_config('web','logo')}"></a></div>
				<div class="login-wrap">
					<div class="login-way">
						<span class="active">帐号注册</span>
					</div>
					<div class="account-login">
						<div class="form-box">
							<form id="memberLogin">
								<div class="form-item">
									<input type="text" name="mobile" id="mobile" placeholder="请输入手机号" class="login-input">
								</div>
								<div class="form-item">
									<div style="width:180px;display:inline;">
										<input type="text" name="code" id="code" placeholder="请输入短信验证码" class="login-input" style="width: 180px;">
									</div>
									<span class="code-btn"><button class="sendsms" type="button">发送</button></span>
								</div>
								<div class="form-item">
									<div style="width:140px;display:inline-block;">
										<input type="text" name="captcha" id="captcha" placeholder="验证码" class="login-input" style="width: 140px;">
									</div>
									<div class="captcha-img" >
										{:captcha_img()}
										<input type="hidden" value="{:make_token()}" />
									</div>
								</div>
								<div class="form-item">
									<input type="password" name="pwd" placeholder="密码" class="login-input">
								</div>
								<div class="form-item">
									<input id="agree" name="agree" type="checkbox" value="1">
                                    <label> 我已阅读并接受 <span class="agreement">《用户协议》</label>
								</div>
								<div class="form-item" style="padding: 0;">
									<button id="loginSubmit" type="button" class="login-btn">注册</button>
								</div>
							</form>
							<div class="footer-operation">
								<p>已有帐号？<a href="{:url('login/index')}">立即登录</a></p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="foot">
			{:get_system_config('web','copyright')} <a id="beian" href="//www.beian.miit.gov.cn" target="_blank" rel="nofollow" style="margin-left: 12px;">{:get_system_config('web','icp')}</a>
		</div>
	</div>
	<script language="javascript" src="{__JS__}/jquery.min.js"></script>
	<script language="javascript" src="{__JS__}/layer/layer.js"></script>
	<script type="text/javascript">
		$('#loginSubmit').on('click', function () {
			if ($('#agree').is(':checked')) {
            } else {
                layer.msg("请确保已阅读并接受《注册协议》");
                return false;
            }
			$.ajax({
				url: "{:url('login/reg_submit')}",
				data: $('#memberLogin').serialize(),
				type: 'post',
				async: false,
				success: function (res) {
					layer.msg(res.msg);
					if (res.code === 0) {
						setTimeout(function () {
							window.location.href="{:url('user/index')}";
						}, 2000);
					} else {
						$('[alt="captcha"]').click();
					}
				}
			})
		});
		$('.agreement').on('click', function () {
			//页面层
			layer.open({
				title: '用户协议',
				type: 1,
				btn: ['同意','拒绝'], //按钮
				skin: 'layui-layer-rim', //加上边框
				area: ['1000px', '700px'], //宽高
				yes:function(index,layero) {
					$("#agree").prop("checked", true);
					layer.close(index);
                },
                btn2: function(index, layero) {
					$("#agree").prop("checked", false);
					layer.close(index);
                },
				content: `<div class="agreement-content">{$agreement|raw}</div>`
			});
		});
		//获取验证码
		var countdown = 60;
		$('.sendsms').on('click', function () {
			if(countdown == 0 || countdown == 60) {
				let mobile = $("#mobile").val();
				let captcha = $("#captcha").val();
				if(!mobile) {
					layer.msg("请填写手机号！");
					return false;
				}
				if (!captcha) {
					layer.msg("请输入图形验证码！");
					return false;
				}           
				$.ajax({
					url: "{:url('login/regsms')}",
					data: {mobile: mobile, captcha: captcha},
					type: 'post',
					async: false,
					success: function (res) {
						layer.msg(res.msg);
						if (res.code === 0) {
							setTimeout(function () {
								settime($(".sendsms"));
							}, 1000);
						} else {
							$('[alt="captcha"]').click();
						}
					}
				})
			}
		});
		function settime(obj) {
			if (countdown == 0) {       
				obj.text('发送');
				countdown = 60;
				return false;
			} else {
				obj.text(countdown);
				countdown--;
			}
			setTimeout(function() {
				settime(obj) }
			,1000)
		}
	</script>
</body>

</html>